<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>ArcGISDynamicMapService</title>
        <link rel="shortcut icon" href="img/favicon.png">
        <link rel="stylesheet" type="text/css" href="http://202.203.132.223/arcgis_js_v38_api/arcgis_js_api/library/3.8/3.8/js/esri/css/esri.css" />

        <script src="http://202.203.132.223/arcgis_js_v38_api/arcgis_js_api/library/3.8/3.8/init.js"></script>
     

        <link rel="stylesheet" type="text/css" href="css/add1.css">
        <link rel="stylesheet" type="text/css" href="css/nav.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/font.css">
        <link rel="stylesheet" href="css/7b66cb1a.main.css">
        <style>
          #DivFeature {
                width: 365px;
                height: 247px;
                margin-left: -8px;
                margin-top: 15px;
            }
      
         #SelectAdd{padding-top:0px !important;}

        </style>
        <script>
            var map;
            var newGraphic=null;
            var selectedTemplate;
            var newAttributes
            var myGraphicLayer;
            var myLayer=null;
            var myGraphic=null;
            var myJson={};

              require([
                "esri/map",
                "esri/toolbars/draw",
                "esri/toolbars/edit",
                "esri/graphic",
                "esri/config",

                "esri/layers/FeatureLayer",
                "esri/layers/WebTiledLayer",
                "esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleLineSymbol",
                "esri/symbols/SimpleFillSymbol",

                "esri/dijit/editing/TemplatePicker",

                "dojo/_base/array",
                "dojo/_base/event",
                "dojo/_base/lang",
                "dojo/parser",
                "dijit/registry",

                "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
                "dijit/form/Button", "dojo/domReady!"
              ], function(
                Map, Draw, Edit, Graphic, esriConfig,
                FeatureLayer,WebTiledLayer,
                SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
                TemplatePicker,
                arrayUtils, event, lang, parser, registry
              ) {
                parser.parse();

                // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/javascript/jshelp/ags_proxy.html
                esriConfig.defaults.io.proxyUrl = "/proxy/";

                // This service is for development and test_falseing purposes only. We recommend that you create your own geometry service for use within your applications.
                esriConfig.defaults.geometryService = new esri.tasks.GeometryService("http://202.203.132.223:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");

                var opts={//extent:new esri.geometry.Extent({
                    //"xmin":103.6,
                    //"ymin":28.5,
                    //"xmax":104.2,
                    //"ymax":32.3,
                    //"spatialReference":{"wkid":4326},
                  //}),
                  center: [104.02,27.83],
                  zoom:13  
                };

                map = new Map("mymap",opts);

                map.on("layers-add-result", initEditing);

                // var osmLayer=new esri.layers.OpenStreetMapLayer();
                // map.addLayer(osmLayer); //0

                //var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer");
                //map.addLayer(myTiledMapServiceLayer);

                //var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer ("http://202.203.132.223:6080/arcgis/rest/services/subset_new/MapServer"); 
                //map.addLayer(tiledLayer);

                // var dynamiclayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://202.203.132.223:6080/arcgis/rest/services/遥感图/google18/MapServer");
                // map.addLayer(dynamiclayer);

                var mapQuest = new esri.layers.WebTiledLayer("http://202.203.132.223:7999/offline/{level}/{col}/{row}.jpg", {
                   //"id": "mapQuest",
                   //"subDomains": mqSubDomains,
                   //"copyright": "MapQuest © 2012"
                   SpatialReference: 4326
               });
               var Street = new esri.layers.WebTiledLayer("http://202.203.132.223:7999/overlay_s/{level}/{col}/{row}.png", {
                   //"id": "mapQuest",
                   //"subDomains": mqSubDomains,
                   //"copyright": "MapQuest © 2012"
                   SpatialReference: 4326
               });
               map.addLayer(mapQuest);
               map.addLayer(Street);

                var myInfoTemplate=new esri.InfoTemplate("${Name}","名称：${Name},${Village}");

                var landuseLineLayer = new FeatureLayer("http://202.203.132.223:6080/arcgis/rest/services/test/FeatureServer/3", {
                    mode: FeatureLayer.MODE_SNAPSHOT,
                    infoTemplate:myInfoTemplate,
                    outFields: ["*"]
                });

                //var landusePointLayer = new FeatureLayer("http://202.203.132.223:6080/arcgis/rest/services/test_false/FeatureServer/0", {
                    //mode: FeatureLayer.MODE_SNAPSHOT,
                    //infoTemplate:myInfoTemplate,
                    //outFields: ["*"]
                //});

                //map.addLayers([landusePointLayer]);
                map.addLayers([landuseLineLayer]);
                //map.addLayers([landusePointLayer, landuseLineLayer]);
                 //var myPoint=new esri.geometry.Point(104,24.8);
                //map.centerAt(myPoint);
                //map.centerAndZoom(myPoint,11);

                function initEditing(evt) {
                    console.log("initEditing", evt);

                    // var map = this;
                    var currentLayer = null;
                    var layers = arrayUtils.map(evt.layers, function(result) {
                        return result.layer;
                    });
                    console.log("layers", layers);

                    var editToolbar = new Edit(map);
                    editToolbar.on("deactivate", function(evt) {
                    currentLayer.applyEdits(null, [evt.graphic], null);
                });

                arrayUtils.forEach(layers, function(layer) {
                    var editingEnabled = false;
                    layer.on("dbl-click", function(evt) {
                        evt.stopPropagation();
                        event.stop(evt);
                        if (editingEnabled === false) {
                            editingEnabled = true;
                            editToolbar.activate(Edit.EDIT_VERTICES , evt.graphic);
                        } else {
                            currentLayer = this;
                            editToolbar.deactivate();
                            editingEnabled = false;
                        }
                    });

                    layer.on("click", function(evt) {
                        var attr=evt.graphic.attributes; 
                        myLayer=layer;
                        myGraphic=evt.graphic;
                        dojo.byId("Name").value=attr["Name"];
                        dojo.byId("Class").value=attr["Class"];
                        dojo.byId("StartBuildTime").value=attr["StartBuildTime"];
                        dojo.byId("EndBuildTime").value=attr["EndBuildTime"]


                        event.stop(evt);
                        if (evt.ctrlKey === true || evt.metaKey === true) {  //delete feature if ctrl key is depressed
                            layer.applyEdits(null,null,[evt.graphic]);
                            currentLayer = this;
                            editToolbar.deactivate();
                            editingEnabled=false;
                        }
                    });
                });
                //创建要素模板
                var templatePicker = new TemplatePicker({
                    featureLayers: layers,
                    rows: "auto",
                    columns: 2,
                    grouping: true,
                    style: "height: auto; overflow: auto;"
                }, "DivFeature");

                templatePicker.startup();

                var drawToolbar = new Draw(map);

                templatePicker.on("selection-change", function() {
                    if( templatePicker.getSelected() ) {
                      selectedTemplate = templatePicker.getSelected();
                    }
                    switch (selectedTemplate.featureLayer.geometryType) {
                      case "esriGeometryPoint":
                        drawToolbar.activate(Draw.POINT);
                        break;
                      case "esriGeometryMultipoint":
                        drawToolbar.activate(Draw.MULTI_POINT);
                        break;
                      case "esriGeometryPolyline":
                        drawToolbar.activate(Draw.POLYLINE);
                        break;
                      case "esriGeometryPolygon":
                        drawToolbar.activate(Draw.POLYGON);
                        break;
                    }
                });

                drawToolbar.on("draw-end", function(evt) {
                    drawToolbar.deactivate();
                    editToolbar.deactivate();
                    newAttributes = lang.mixin({}, selectedTemplate.template.prototype.attributes);
                    //line symbol
                    var lineSymbol=new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH,new dojo.Color([255,0,0]),3);

                    var graphicPolyline=new esri.Graphic(evt.geometry,lineSymbol);
                    myGraphicLayer=new esri.layers.GraphicsLayer();
                    map.addLayer(myGraphicLayer);
                    myGraphicLayer.add(graphicPolyline);

                    newGraphic = new Graphic(evt.geometry, null, newAttributes);
                    //selectedTemplate.featureLayer.applyEdits([newGraphic], null, null);
                });
                    dojo.connect(dojo.byId('save'),'onclick',mySavePoint);
                    dojo.connect(dojo.byId('cancel'),'onclick',myCancelSave);
                    dojo.connect(dojo.byId('reset'),'onclick',myResetText);
                    dojo.connect(dojo.byId('saveChange'),'onclick',mySaveChange);
                }

                function mySaveChange(){
                    var flag=false;//判断各个字段内容是否有改变
                    if(myGraphic==null){
                        alert("请先选择元素！");
                        return;
                    }
                    if(dojo.byId("Name").value==""){
                        alert("名字不能为空！！");
                        return;
                    }                    
                    newAttributes=myGraphic.attributes;
                    if(newAttributes["Name"]!=dojo.byId("Name").value){
                        alert("名字不同，不能修改！");
                        return;
                    }
                    if(dojo.byId("Class").value!=newAttributes["Class"]){
                        newAttributes["Class"]=dojo.byId("Class").value;
                        flag=true;
                    }
                    if(dojo.byId("StartBuildTime").value!=newAttributes["StartBuildTime"]){
                        newAttributes["StartBuildTime"]=dojo.byId("StartBuildTime").value;
                        flag=true;
                    }
                    if(dojo.byId("EndBuildTime").value!=newAttributes["EndBuildTime"]){
                        newAttributes["EndBuildTime"]=dojo.byId("EndBuildTime").value;
                        flag=true;
                    }

                    if(flag==false){
                        alert("内容无变化，无需修改！！")
                        return;
                    }
                    newGraphic = new Graphic(myGraphic.geometry, null, newAttributes);
                    myLayer.applyEdits(null, [newGraphic], null);
                    //myGraphicLayer.clear();
                    flag=false;
                    myLayer=null;
                    myGraphic=null;
                    myResetText();
                    newGraphic=null;
                    newAttributes=null;  
                    alert("修改成功！")   
                }

                function mySavePoint(){
                    if(newGraphic==null){
                        alert("请先在地图上画线！");
                        return;
                    }
                    if(dojo.byId("Name").value==""){
                        alert("名字不能为空！！");
                        return;
                    }
                    newAttributes["Name"]=dojo.byId("Name").value;
                    if(dojo.byId("Class").value!="")
                        newAttributes["Class"]=dojo.byId("Class").value;
                    if(dojo.byId("StartBuildTime").value!="")
                        newAttributes["StartBuildTime"]=dojo.byId("StartBuildTime").value;
                    if(dojo.byId("EndBuildTime").value!="")
                        newAttributes["EndBuildTime"]=dojo.byId("EndBuildTime").value;
                    //var id=dojo.byId("PovertyState");
                    //var option=id.options;
                    //var value=id.value;
                    //var selected=option[value-1].innerHTML;
                    //newAttributes["PovertyState"]=selected;
                    //if(dojo.byId("Reason").value!="")
                        //newAttributes["Reason"]=dojo.byId("Reason").value;
                    //if(dojo.byId("PhoneNumber").value!="")
                        //newAttributes["PhoneNumber"]=dojo.byId("PhoneNumber").value;
                    //if(dojo.byId("Supporters").value!="")
                        //newAttributes["SupportersName"]=dojo.byId("Supporters").value;
                    //if(dojo.byId("SupportersInstitution").value!="")
                        //newAttributes["SupportersInstitution"]=dojo.byId("SupportersInstitution").value;
                    selectedTemplate.featureLayer.applyEdits([newGraphic], null, null);
                    myGraphicLayer.clear();
                    newGraphic=null;
                    alert("保存成功！");
                }
                function myCancelSave(){
                    dojo.byId("Name").value="";
                    dojo.byId("Class").value="";
                    dojo.byId("StartBuildTime").value="";
                    dojo.byId("EndBuildTime").value="";
                    dojo.byId("Reason").value="";
                    dojo.byId("PhoneNumber").value="";
                    dojo.byId("Supporters").value="";
                    dojo.byId("SupportersInstitution").value="";
                    myGraphicLayer.clear(); 
                    newGraphic=null;                  
                }
                function myResetText(){
                    dojo.byId("Name").value="";
                    dojo.byId("Class").value="";
                    dojo.byId("StartBuildTime").value="";
                    dojo.byId("EndBuildTime").value="";
                    dojo.byId("Reason").value="";
                    dojo.byId("PhoneNumber").value="";
                    dojo.byId("Supporters").value="";
                    dojo.byId("SupportersInstitution").value="";
                }

              });
        </script>

    </head>
    <body>
<div id="mapContainer">
     <nav>   
         <div class="title">
             <img src="img/font.png" alt="">
         </div>
         <div class="userinfo">
             <a class="info-list" href="javascript:;">
                 <i class="icon icon-user-tie"></i>
                 <span>联系人:陈旭</span>
             </a>
             <a class="info-list" href="javascript:;">
                 <i class="icon iconfont icon-contact"></i>
               <span>电话:13888315351</span>
             </a>
             
         </div>                  
     </nav>
	    <div class="mapdiv" id="mapdiv">
            <div class="container">
                <div class="top">
                        <div class="jiao"></div>
                        <div class="area form-group">
                           请选择扶贫区域：
                           <select id="fupinfield" class="form-control">
                             <option value="dongchuan">东川区</option>
                             <option value="daguan" selected="selected">大关县</option>
                           </select> 
                       
                         </div>
                         <div id="DivBottom"><a href="javascript:window.history.back(-1);">返回上一层</a></div>         
                </div>
                <div class="map">
                        <div id="mymap"></div>
                        <div id="SelectAdd">
                            <div id="property">
                                <form action="#">
                                    <fieldset>
                                    <legend>ProvertyInformation</legend>
                                        <table>
                                            <tr>
                                                <td class="txt">*名字: </td><td><input id="Name" type="text"></td>
                                            </tr>   
                                            <tr>  
                                                <td class="txt">类别: </td><td><input id="Class" type="text"></td>
                                            </tr>   
                                            <tr>
                                                <td class="txt">开工时间:</td><td> <input id="StartBuildTime" type="text"></td>
                                            </tr>   
                                            <tr>
                                                <td class="txt">完工时间:</td><td> <input id="EndBuildTime" type="text"></td>
                                            </tr>   
                                            <tr>
                                                <td class="txt">贫困状态:</td>
                                                <td><select name="" id="PovertyState" >
                                                    <option value="1" selected="true">贫困户</option>
                                                    <option value="2" >脱贫户</option>
                                                </select></td>
                                            </tr>   
                                            <tr>
                                                <td class="txt">理由:</td><td><input id="Reason" type="text" disabled="disabled"></td>
                                            </tr>   
                                            <tr>    
                                                <td class="txt">电话号码:</td><td><input id="PhoneNumber" type="text" disabled="        disabled"></td>
                                            </tr>   
                                            <tr>
                                                <td class="txt">挂包人:</td><td><input id="Supporters" type="text" disabled="disabled">        </td>
                                            </tr>   
                                            <tr>    
                                                <td class="txt">挂包单位:</td><td><input id="SupportersInstitution" type="text"         disabled="      disabled"></td>
                                            </tr>                             
                
                                        </table>
                
                                </fieldset> 
                                    <div class="button">
                                        <input id="save" type="button" value="保存" >
                                        <input id="saveChange" type="button" value="修改" >               
                                        <input id="reset" type="button" value="重置"> 
                                        <input id="cancel" type="button" value="取消">
                                    </div>
                
                                </form>
                                <div id="DivFeature"></div>
                            </div>
        
                        </div>
                        <div class="m-navigation-bar m-navigation">
                              <ul class="m-navigation--primary">
                                  <li class="nav-item nav-search">
                                       <span class="nav-item-icon">
                                          <img  title="搜索" class="" src="img/search.png" alt="" onclick=""/ >
                                       </span>
                                       <span class="nav-item-title">搜索</span>
                                       <span class="nav-item-background"></span>
                                  </li>
       
                            
                                  <li class="nav-item nav-select">
                                    <span class="nav-item-icon">
                                       <img  title="选择" class="" src="img/select.png" alt="" onclick=""/ >
                                    </span>
                                    <span class="nav-item-title">选择</span>
                                    <span class="nav-item-background"></span>
                                  </li>
       
                                
                                  <li class="nav-item nav-add">
                                    <span class="nav-item-icon">
                                       <img  title="添加" class="" src="img/add.png" alt="" onclick=""/ >
                                    </span>
                                    <span class="nav-item-title">添加</span>
                                    <span class="nav-item-background"></span>
                                  </li>
       
                               
                                  <li class="nav-item nav-location">
                                    <span class="nav-item-icon" >
                                        <img  title="定位" class="" src="img/location.png" alt="" onclick=""/ >
                                    </span>
                                    <span class="nav-item-title">定位</span>
                                    <span class="nav-item-background"></span>
                                  </li>
       
                              </ul>
                        </div>
                </div>
            </div>
      
            
            
        </div>
        <div class="slider">  
               <ul>
                    <li><img id="drawPolygon" title="画多边形选择" class="tool-icon" src="img/main.png" alt="" onclick="  return myDrawPolygon()"/ ></li>
                    <li><img id="drawPolyline" title="画线测量" class="tool-icon" src="img/12.png" alt="" onclick="return   myDrawPolyline()"/></li>
                    <li><img id="drawPoint" title="画点选择" class="tool-icon" src="img/13.png" alt=""  onclick="return myDrawPoint()"/></li>
                    <li><img id="simpleRender" title="属性渲染" class="tool-icon" src="img/xianran2.png" alt="" onclick="   return myUniqueRender()"/></li>
                    <li><img id="myGeoLocation" title="底图切换" class="tool-icon" src="img/map.png" alt="" onclick="return   mySimpleRender()"/></li>
                    <li><img id="uniqueRender" title="定位添加" class="tool-icon" src="img/dl_icon.png" alt="" onclick="return    GeoLocation()"/></li>
                    <li><img id="myAddPoint" title="添加点" class="tool-icon" src="img/1.png" alt="" onclick="return   myAddNewPoint()"/></li>
                    <li><img id="myAddLine" title="添加线" class="tool-icon" src="img/2.png" alt="" onclick="return    myAddNewLine()"/></li>
                    <li><img id="myAddPolygon" title="添加面" class="tool-icon" src="img/3.png" alt="" onclick="return myAddNewPoygon()"/></li>
                    <li><img id="Button1" title="热度图分析" class="tool-icon" src="img/redu2.png" alt="" onclick="return Heatmap()"/></li>
               </ul>
        </div>
    </div>
</div>
  
 
    </body>
</html>